<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/common.jspf"%>
<%@ include file="/common/taglibs.jspf"%>
<html>
<head>
</head>
<body>
	<form id="orderForm" action="saveOrder.json" method="post" class="form-horizontal">
		<input type="hidden" id="tenantTypeCode" name="tenantTypeCode" value="${tenantDef.code }"> 
		<input type="hidden" id="tenantOrderType" name="tenantOrderType" value="${tenantOrderType }"> 
		<input type="hidden" id="tenantId" name="tenantId" value="${tenant.id }">
		<fieldset>
			<legend>
				<s:message code="tenantOrder.ui.fieldset.baseInfo" />
			</legend>
			<div class="row-fluid">
				<div class="control-group">
					<label class="control-label" for=""><s:message code="userInfo.userName" /></label>
					<div class="controls">
						<select name="userId" id="userId">
							<li:optionsCollection collection="${userInfoList }" var="user">
								<li:option property="${user.id }">${user.userName }(${user.loginId })</li:option>
							</li:optionsCollection>
						</select>
					</div>
				</div>
				<div class="control-group">
					<label class="control-label" for="tenantCode"><s:message code="tenantOrder.tenantCode" /></label>
					<div class="controls">
						<input type="text" id="tenantCode" name="tenantCode" value="${tenant.tenantCode }" readonly="readonly">
					</div>
				</div>
				<div class="control-group">
					<label class="control-label" for="tenantAlias"><s:message code="tenantOrder.tenantAlias" /></label>
					<div class="controls">
						<input type="text" id="tenantAlias" name="tenantAlias" value="${tenant.tenantAlias }" readonly="readonly">
					</div>
				</div>
				<div class="control-group">
					<label class="control-label" for="bagCode"><s:message code="tenantOrder.bagCode" /></label>
					<div class="controls">
						<input type="text" id="bagCode" name="bagCode" value="${tenant.bagCode }" readonly="readonly">
					</div>
				</div>
				<div class="control-group">
					<label class="control-label" for="price"><s:message code="tenantOrder.price" /></label>
					<div class="controls">
						<input type="text" id="price" name="price" value="${tenantDef.price }" readonly="readonly">
					</div>
				</div>
				<div class="control-group">
					<label class="control-label" for="quantity"><s:message code="tenantOrder.quantity" /></label>
					<div class="controls">
						<div class="input-prepend input-append">
							<button class="btn" type="button" onclick="minusQuantity();">-</button>
							<input type="text" id="quantity" name="quantity" value="3" class="span6">
							<button class="btn" type="button" onclick="plusQuantity();">+</button>
							<span class="help-inline"><s:message code="tenantOrder.quantity.help" /></span>
						</div>
					</div>
				</div>
				<div class="control-group">
					<label class="control-label" for="remark"><s:message code="common.field.remark" /></label>
					<div class="controls">
						<textarea rows="3" cols="8" id="remark" name="remark" class="span8"></textarea>
					</div>
				</div>
			</div>
		</fieldset>

		<fieldset>
			<legend>
				<s:message code="tenantOrder.ui.fieldset.productInfo" />
			</legend>
			<div class="row-fluid">
				<table class="table table-hover table-condensed">
					<col width="10%" />
					<col width="50%" />
					<thead>
						<tr>
							<th><s:message code="tenantType.code" /></th>
							<th><s:message code="tenantType.descr" /></th>
							<th><s:message code="tenantType.items" /></th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>${tenantDef.code }</td>
							<td><s:message code="tenantType.descr.${tenantDef.code }" /></td>
							<td>
								<ul class="unstyled">
									<li><i class="icon-chevron-right"></i>
										<s:message code="tenantType.maxMembers" />:&nbsp;<b>
										<c:choose>
											<c:when test="${tenantDef.maxMembers<=0 }">
												<s:message code="tenantType.ultimate" />
											</c:when>
											<c:otherwise>${tenantDef.maxMembers }</c:otherwise>
										</c:choose></b>
									</li>
									<li><i class="icon-chevron-right"></i>
										<s:message code="tenantType.maxStorage" />:&nbsp;<b>
										<c:choose>
											<c:when test="${tenantDef.maxStorage<=0 }">
												<s:message code="tenantType.ultimate" />
											</c:when>
											<c:otherwise>${tenantDef.maxStorage }</c:otherwise>
										</c:choose></b>
									</li>
									<li><i class="icon-chevron-right"></i>
										<s:message code="tenantType.modules" />:&nbsp;<b>
										<c:choose>
											<c:when test="${tenantDef.modules<=0 }">
												<s:message code="tenantType.ultimate" />
											</c:when>
											<c:otherwise>${tenantDef.modules }</c:otherwise>
										</c:choose></b>
									</li>
									<li><i class="icon-chevron-right"></i><s:message code="tenantType.support" />:&nbsp;<b>${tenantDef.support }</b></li>
								</ul>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</fieldset>

		<div class="form-actions">
			<button type="submit" class="btn btn-primary" data-loading-text="<s:message code='common.processing' />">
				<i class="icon-ok"></i>
				<s:message code="btn.submit" />
			</button>
			<button type="button" class="btn" onclick="history.back();"><s:message code="btn.cancel" /></button>
		</div>
	</form>
	
	<script type="text/javascript">
      $(document).ready(function(){        
    	  $('#orderForm').littFormSubmit({
				rules : {
					tenantCode : {
						required : true,
						minlength : 4,
						maxlength: 50
					},	
					tenantAlias : {
						required : true,
						minlength : 4,
						maxlength: 50
					},	
					quantity: {
						required: true,
						digits: true,
						min: 1
					}
				},		
				success: function(reply){
					 //goto paychannel
				}
			});	
      });
      
      function minusQuantity(){
    	  var quantity = $("#quantity").val();
    	  if(!$.isNumeric(quantity))
    		  quantity = "3";
    	  var value = parseInt(quantity);
    	  value = value - 1;
    	  $("#quantity").val(value>0?value:1);
      }
      
      function plusQuantity(){
    	  var quantity = $("#quantity").val();
    	  if(!$.isNumeric(quantity))
    		  quantity = "3";
    	  var value = parseInt(quantity);
    	  value = value + 1;
    	  $("#quantity").val(value>0?value:1);
      }
      
    </script>
</body>
</html>
